<template>
  <div id="GoodList">
    <!-- 数据更新时间 -->
    <div class="updateTimewl" v-if="dataList.length != 0">
      数据更新时间 <span>{{ dataList[0].create_time }}</span>
    </div>
    <!-- 时间 -->
    <section class="mt_20">
      <!-- 时间 -->
      <Timeoptions01
        v-model="time"
        :radio_values="['日榜']"
        class="timeOptions"
      />
      <!-- 搜索 -->
      <section class="search01">
        <div class="searchBox">
          <el-input
            v-model="keyword"
            placeholder="  请输入店铺名称在排行榜中搜索"
            @keyup.enter.native="getData"
          ></el-input>
          <div class="imgBox" @click="getData">
            <img src="@/assets/wang/talentCompare/search.png" />
          </div>
        </div>
      </section>
      <div class="btn_group">
        <button @click="generatorImage">
          <img src="@/assets/meng/star_map04.png" />分享
        </button>
        <button @click="export_data">
          <img src="@/assets/meng/star_map05.png" />导出
        </button>
      </div>
    </section>
    <section ref="capture">
      <table class="table">
        <thead>
          <tr>
            <th>排名</th>
            <th>商品</th>
            <th>人气值</th>
            <th>关联视频数</th>
            <th>关联直播数</th>
            <th>抖音日访客量</th>
            <th>全网日销量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in dataList" :key="'r' + index">
            <td>
              <div class="rankwl">
                <span class="rankNum">{{ item.rank }}</span>
                <div
                  v-if="
                    item.rank_incr == 0 ||
                    item.rank_incr > 0 ||
                    item.rank_incr < 0
                  "
                >
                  <img
                    src="@/assets/wang/goods/up.png"
                    v-if="item.rank_incr > 0"
                  />
                  <img
                    src="@/assets/wang/goods/ping.png"
                    v-if="item.rank_incr == 0"
                    class="pingImg"
                  />
                  <img
                    src="@/assets/wang/goods/down.png"
                    v-if="item.rank_incr < 0"
                  />
                  <span
                    class="rankincr"
                    :class="{
                      down: item.rank_incr < 0,
                      ping: item.rank_incr == 0,
                    }"
                    >{{ Math.abs(item.rank_incr) }}</span
                  >
                </div>
                <span v-else class="new_font">{{ item.rank_incr }}</span>
              </div>
            </td>
            <td>
              <div class="goodsBox" @click="toGoodsDetails(item.pro_id, '0')">
                <img :src="item.logo" class="leftImg" />
                <div class="rightBox">
                  <div>
                    <!-- 来源 -->
                    <div style="margin-right: 5px">
                      <SourceIcon
                        :sourceid="item.source_id"
                        @click="toGoodsDetails(item.pro_id, '0')"
                      />
                    </div>
                    <span>{{ item.title }}</span>
                  </div>
                  <div>
                    <p>
                      售价<span>￥{{ item.price }}</span>
                    </p>
                    <p>
                      佣金率<span v-if="item.commission_rate != 0"
                        >{{ item.commission_rate }}%</span
                      >
                      <span v-if="item.commission_rate == 0">0</span>
                    </p>
                  </div>
                </div>
              </div>
            </td>
            <td>{{ format_num(item.author_count) }}</td>
            <td>{{ format_num(item.aweme_count) }}</td>
            <td>{{ format_num(item.live_count) }}</td>
            <td>
              <div class="rankwl numBox">
                <span>{{ format_num(item.pv_incr) }}</span>
                <div v-if="item.pv_incr_cent != ''">
                  <img
                    src="@/assets/wang/goods/up.png"
                    v-if="item.pv_incr_cent > 0"
                  />
                  <img
                    src="@/assets/wang/goods/ping.png"
                    v-if="item.pv_incr_cent == 0"
                    class="pingImg"
                  />
                  <img
                    src="@/assets/wang/goods/down.png"
                    v-if="item.pv_incr_cent < 0"
                  />
                  <span
                    class="rankincr"
                    :class="{
                      down: item.pv_incr_cent < 0,
                      ping: item.pv_incr_cent == 0,
                    }"
                    >{{ Math.abs(item.pv_incr_cent) }}%</span
                  >
                </div>
                <span v-else class="placeholder"></span>
              </div>
            </td>
            <td>
              <div class="rankwl numBox">
                <span>{{ format_num(item.sale_incr) }}</span>
                <div v-if="item.sale_incr_cent != ''">
                  <img
                    src="@/assets/wang/goods/up.png"
                    v-if="item.sale_incr_cent > 0"
                  />
                  <img
                    src="@/assets/wang/goods/ping.png"
                    v-if="item.sale_incr_cent == 0"
                    class="pingImg"
                  />
                  <img
                    src="@/assets/wang/goods/down.png"
                    v-if="item.sale_incr_cent < 0"
                  />
                  <span
                    class="rankincr"
                    :class="{
                      down: item.sale_incr_cent < 0,
                      ping: item.sale_incr_cent == 0,
                    }"
                    >{{ Math.abs(item.sale_incr_cent) }}%</span
                  >
                </div>
                <span v-else class="placeholder"></span>
              </div>
            </td>
            <td>
              <div class="optionBox">
                <el-tooltip
                  class="item"
                  effect="light"
                  content="商品热度分析"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/goods/1.png"
                    @click="toGoodsDetails(item.pro_id, '0')"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="在售达人分析"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/goods/2.png"
                    alt=""
                    @click="toGoodsDetails(item.pro_id, '2')"
                  /> </el-tooltip
                ><el-tooltip
                  class="item"
                  effect="light"
                  content="关联视频分析"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/goods/3.png"
                    @click="toGoodsDetails(item.pro_id, '1')"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="收藏"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/video/like.png"
                    alt=""
                    v-if="item.isCollect == 0"
                    @click="addStar(item.pro_id, item)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="取消收藏"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/video/liked.png"
                    v-if="item.isCollect == 1"
                    @click="cancelStar(item.pro_id, item)"
                  />
                </el-tooltip>
                <!-- <el-tooltip
                  class="item"
                  effect="light"
                  content="商品舆情分析"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/goods/4.png"
                    @click="seeDetais(item.id, '3')"
                  />
                </el-tooltip> -->
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <p class="nothing" v-show="dataList.length != 0">我是有底线的～</p>
      <div class="empty addTop" v-show="!loading && dataList.length == 0">
          <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
      </div>
    </section>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import Timeoptions01 from "@/component/time_options01.vue";
import SourceIcon from "@/component/SourceIcon.vue";
export default {
  name: "GoodList",
  components: { Timeoptions01, SourceIcon },
  data() {
    return {
      dataList: [],
      page: 1,
      keyword: "",
      time: "日榜",
      rank: 2,
      order_by: "desc", //   表格头部排序
      sort: "favoriteCount", //   表格头部排序
      loading: false,
      needBuy: false,
    };
  },
  computed: {},
  watch: {
    keyword: function (newVal, oldVal) {
      if (newVal == "") {
        this.page = 1;
        this.dataList = [];
        this.getData();
      }
    },
    time: function (newVal, oldVal) {
      this.page = 1;
      this.dataList = [];
      this.getData();
    },
  },
  created() {},
  mounted() {},

  methods: {
    // 获取数据
    getData() {
      let that = this;
      that.loading = true;
      let time = that.time.split("?")[1];
      that.$axios
        .get("/api/product/GetProDiscover", {
          params: {
            keyword: this.trimStr(that.keyword),
            time: time,
          },
        })
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            that.dataList = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 分享
    generatorImage() {
      var that = this;
      // 时间
      let date;
      switch (that.time.split("?")[0]) {
        case "日榜":
          date =
            that.time.split("?")[1].split("-")[0] +
            "年" +
            that.time.split("?")[1].split("-")[1] +
            "月" +
            that.time.split("?")[1].split("-")[2] +
            "日";
          break;
      }
      const loading = this.$loading({
        lock: true,
        text: "导出中...",
        spinner: "el-icon-loading",
        customClass: "customClass",
      });
      var shareContent;
      shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
      // console.log("shareContent", shareContent);
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关
      };
      html2canvas(shareContent, opts).then((canvas) => {
        let str;
        str = `《商品好物榜-${date}》.png`;
        canvas.toBlob(
          function (blob) {
            const eleLink = document.createElement("a");
            eleLink.download = str;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          "image/png",
          1
        );
        loading.close();
      });
    },
    // 导出
    // 文字加replace 数字加\t
    export_data() {
      let that = this;
      // 时间
      let date;
      switch (that.time.split("?")[0]) {
        case "日榜":
          date =
            that.time.split("?")[1].split("-")[0] +
            "年" +
            that.time.split("?")[1].split("-")[1] +
            "月" +
            that.time.split("?")[1].split("-")[2] +
            "日";
          break;
      }
      let str = "";
      str = `排名,排名变动,商品来源,商品名称,售价,佣金率,人气值,关联视频数,关联直播数,抖音日访客量,浏览量新增百分比,全网日销量,销量新增百分比\n`;
      for (let i = 0; i < that.dataList.length; i++) {
        // 抖音浏览量增量
        let pv_incr_cent = "";
        if (that.dataList[i].pv_incr_cent == "") {
          pv_incr_cent = "--";
        } else {
          pv_incr_cent = that.dataList[i].pv_incr_cent + "%";
        }
        // 抖音销量增量
        let sale_incr_cent = "";
        if (that.dataList[i].sale_incr_cent == "") {
          sale_incr_cent = "--";
        } else {
          sale_incr_cent = that.dataList[i].sale_incr_cent + "%";
        }

        str += `${that.dataList[i].rank},${
          that.dataList[i].rank_incr
        },\"${that
          .proFrom(that.dataList[i].source_id)
          .replace(/"/g, '""')}\",\"${that.dataList[i].title.replace(
          /"/g,
          '""'
        )}\",${that.dataList[i].price},${
          that.dataList[i].commission_rate
        },${that.format_num(that.dataList[i].author_count)},${that.format_num(
          that.dataList[i].aweme_count
        )},${that.format_num(that.dataList[i].live_count)},${that.format_num(
          that.dataList[i].pv_count
        )},${pv_incr_cent},${that.format_num(
          that.dataList[i].sale_count
        )},${sale_incr_cent}\n`;
      }
      var blob = new Blob([str], { type: "text/plain;charset=utf-8" }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement("a");
      link.href = object_url;
      let str_name = "";
      str_name = `《商品好物榜-${date}》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`,
      });
      window.open(router.href, "_blank");
    },
    // 收藏商品
    addStar(id, item) {
      let that = this;
      that.$axios
        .post("/api/collection/InsertCollection", {
          CollectId: id,
          Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
        })
        .then((res) => {
          if (res.data.code == 0) {
            item.isCollect = 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消收藏商品
    cancelStar(id, item) {
      let that = this;
      that.$axios
        .post("/api/collection/CancelCollection", {
          CollectId: id,
          Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
        })
        .then((res) => {
          if (res.data.code == 0) {
            item.isCollect = 0;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang='less' scoped>
#GoodList {
  background: #fff;
  height: fit-content;
  min-height: 100vh;
  .addTop {
    margin-top: 100px;
  }
  .updateTime {
    position: absolute;
    top: 32px;
    right: 20px;
    span {
      font-family: DINAlternate-Bold;
      font-size: 16px;
      color: #1779ff;
      padding-left: 10px;
    }
  }
  .timeOptions {
    display: inline-block;
  }
  .search01 {
    display: inline-block;
    margin-left: 28px;
    .searchBox {
      margin-top: 0 !important;
    }
  }
  .btn_group {
    text-align: right;
    float: right;
    button {
      width: 80px;
      height: 32px;
      background-color: #f8f8f8;
      border-radius: 4px;
      border: solid 1px #e6e6e6;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #222222;
      text-align: center;
    }
    > button:nth-child(1) {
      margin-right: 10px;
      img {
        width: 13px;
        vertical-align: -2px;
        margin-right: 6px;
      }
    }
    > button:nth-child(2) {
      img {
        width: 14px;
        vertical-align: -1px;
        margin-right: 6px;
      }
    }
  }
  table {
    text-align: center;
    margin-top: 19px;
    thead {
      tr {
        th {
          padding: 0 2px;
        }
        th:nth-child(1) {
          width: 8%;
        }
        // th:nth-child(2) {
        //   width: 29%;
        // }
        th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5) {
          width: 9%;
        }
        th:nth-child(6),
        th:nth-child(7) {
          width: 12%;
        }
        th:nth-child(9) {
          width: 15%;
        }
      }
    }
    tbody {
      tr {
        height: 140px;
        td {
          padding: 0 2px;
        }
        td:nth-child(1),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7) {
          font-family: DINAlternate-Bold;
          font-size: 16px;
          color: #222222;
        }
      }
    }
    // 数量
    .numBox {
      span:nth-of-type(1) {
        font-size: 16px !important;
      }
    }
    // 商品
    .goodsBox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 5%;
      cursor: pointer;
      .leftImg {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        border: 1px solid #e5e5e5;
      }
      .rightBox {
        flex: 1;
        margin-left: 20px;
        text-align: left;
        div:nth-of-type(1) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          text-align: left;
          // img {
          //   width: 18px;
          //   height: 18px;
          //   margin-right: 5px;
          // }
          span {
            display: block;
            width: 200px;
            text-align: left;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        div:nth-of-type(2) {
          text-align: left;
          margin-top: 11px;
          p {
            display: inline-block;
            text-align: left;
          }
          p:nth-of-type(1) {
            font-size: 14px;
            color: #555555;
            padding-right: 24px;
            span {
              font-family: DINAlternate-Bold;
              font-size: 16px;
              color: #ea1b0b;
              padding-left: 2px;
              text-align: left;
            }
          }
          p:nth-of-type(2) {
            font-size: 14px;
            color: #555555;
            // padding-left: 24px;
            span {
              font-family: DINAlternate-Bold;
              font-size: 16px;
              color: #222222;
              padding-left: 4px;
            }
          }
        }
      }
    }
    // 操作
    .optionBox {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      img {
        width: 32px;
        height: 32px;
        margin-right: 16px;
        cursor: pointer;
      }
      img:nth-child(4) {
        margin-right: 0;
      }
    }
  }
}
</style>